<!--  -->
<template>
  <div class="timeSelectBox">
    <div class="timeMoudle">
      <div class="mr10" v-for="(item, index) in bdTimeData" :key="index" @click="handleBdTime(index, item.value)" :class="{timeStyle: bdTimeIndex == index}">{{item.title}}</div>
      <div class="timeBox">
        <span class="startTime">{{startTime}}</span>
        <span class="line">—</span>
        <span class="endTime">{{endTime}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import formatDate from '../utils/commonFun.js'
export default {
  components: {},
  data() {
    return {
      bdTimeIndex: 1,
      bdScopeTime: 'month',
      bdTimeData: [
        {title: '本日', value: 'day'},
        {title: '本周', value: 'week'},
        {title: '本月', value: 'month'}
      ],
      insuranceChart: null,
      insuranceOption: {},
      insuranceDataCount: [],
      inquiryDataCount: [],
      payDataCount: [],
      dataLineX: [],
      startTime: '',
      endTime: '',
      // ...dateUtil.getWeek()
    };
  },
  mounted() {
    
  },
  computed: {},
  watch: {},
  methods: {
    handleBdTime(index, value) {
      if (index === 0) {
        this.bdTimeIndex = 0
        this.startTime = formatDate.formatDate(new Date())
        this.endTime = formatDate.formatDate(new Date())
      }
      if (index === 1) {
        this.bdTimeIndex = 1
        this.startTime = formatDate.getWeek()[0]
        this.endTime = formatDate.getWeek()[1]
      }
      if (index === 2) {
        this.bdTimeIndex = 2
        this.startTime = formatDate.getMonth()[0]
        this.endTime = formatDate.getMonth()[1]
      }
      // console.log(index, value, this.bdTimeIndex)
      this.$emit('getTimeIndex', this.bdTimeIndex)
      this.bdTimeIndex = index
      this.bdScopeTime = value
      this.getlineChartDataFun(this.bdScopeTime)
    },
    getlineChartDataFun(){},
    // 初始默认选择周
    initDate() {
      this.startTime = formatDate.getWeek()[0]
      this.endTime = formatDate.getWeek()[1]
    }
  },
  created() {
    this.initDate()
  },
};
</script>
<style lang="less" scoped>
  .timeStyle{
    color: #fff;
  }
  .timeMoudle{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    .mr10{
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .timeBox{
    width: 286px;
    height: 24px;
    color: #fff;
    border: 1px solid #3152F7;
    border-radius: 4px;
    background: rgba(49, 82, 247, 0.2);
    padding: 0 16px;
    line-height: 24px;
    .line{
      margin-left: 20px;
      margin-right: 20px;
    }
  }
</style>
